<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<style>
	#upload-img{
		width: 100px;
		height: 100px;
		border: 1px solie #A2A2A2;
	}
</style>

<fieldset class="layui-elem-field layui-field-title"
	style="margin-top: 30px;">
	<legend>添加商品</legend>
</fieldset>
<form class="layui-form" action="">
	<div class="layui-form-item">
		<label class="layui-form-label">商品名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" required lay-verify="required"
				placeholder="请输入商品名称" autocomplete="off" class="layui-input">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品价格</label>
		<div class="layui-input-inline">
			<input type="text" name="price" required lay-verify="required"
				placeholder="请输入商品价格" autocomplete="off" class="layui-input">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品分类</label>
		<div class="layui-input-inline">
			<select name="parent" lay-filter="parent">
				
			</select>
		</div>
		<div class="layui-input-inline">
			<select name="tid" >
				
			</select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<input type="hidden" name="image">
		<label class="layui-form-label">图片</label>
		<div class="layui-input-inline">
			<div class="layui-upload">
				<button type="button" class="layui-btn" id="upload">上传图片</button>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="upload-img">
					<p id="demoText"></p>
				</div>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">状态</label>
		<div class="layui-input-block">
			<input type="radio" name="status" value="0" title="正常" checked> <input
				type="radio" name="status" value="1" title="下架">
		</div>
	</div>
	
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>

<script>
	layui.use(["form","upload"],function(){
		var form = layui.form;
		var upload = layui.upload;
		
		//渲染表单
		form.render();
		
		//Ajax 异步请求，获取一级分类
		$.ajax({
			url : "admin/type/getFirst.json",
			data : {},
			type : "post",
			dataType : "json",
			success : function(data){
				if(data.code > 0){
					var html = "<option value='0'>请选择一级分类</option>";
					$.each(data.data,function(index,item){
						html += "<option value='"+item.id+"'>"+item.name+"</option>";
					});
					
					$("select[name='parent']").html(html);
					
					form.render();
				}
			},
			error : function(){
				console.log("请求失败");
			}
		});
		
		//监听下拉列表
		form.on("select(parent)", function(data){
			//console.log(data.elem);	//select原始DOM对象
			//console.log(data.value);//被选中的值
			//console.log(data.othis);//美化后的DOM对象
			
			if(data.value == 0){
				//清空原来的加载
				$("select[name='tid']").html("");
				form.render();
				//不需要加载二级分类
				return;
			}
			
			//使用Ajax加载二级分类
			$.ajax({
				url : "admin/type/getSecond.json",
				data : {parent: data.value},
				type : "post",
				dataType : "json",
				success : function(data){
					if(data.code > 0){
						var html = "<option value=''>请选择二级分类</option>";
						$.each(data.data,function(index,item){
							html += "<option value='"+item.id+"'>"+item.name+"</option>";
						});
						
						$("select[name='tid']").html(html);
						
						form.render();
					}
				},
				error : function(){
					console.log("请求失败");
				}
			});
		});
		
		//表单提交
		form.on("submit(formDemo)",function(data){
			
			//Ajax上传
			$.ajax({
				url : 'admin/goods/add.json',
				data : data.field,
				type : "post",
				dataType : "json",
				success : function(data){
					if(data.code > 0){
						// 成功，跳转页面
						gotoURL("admin/goods/index.do");
					}
					
					layer.msg(data.message);
				},
				error : function(){
					console.log("请求失败");
				}
			});
			
			return false;
		});
		
		//文件上传
		upload.render({
			elem : "#upload",
			url : "upload.json",
			done : function(data){
				if(data.code > 0){
					$("#upload-img").attr("src","upload/" + data.message);
					$("input[name='image']").val(data.message);
				}else {
					layer.msg(data.message);
				}
			},
			error : function(){
				console.log("请求失败")
			}
		});
	});
</script>